<template>
    <div class="orderDetails">
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="order-details">
            <el-row>
                <el-col :span="24" class="title">基本信息</el-col>
            </el-row>
            <el-row class="content">
                <el-row class="row-style">
                    <el-col :span="6">
                        订单号：<span>{{orderDetails.order_num}}</span>
                    </el-col>
                    <el-col :span="6">
                        下单时间：<span>{{$util.timeStampToTime(orderDetails.createtime)}}</span>
                    </el-col>
                    <el-col :span="6">
                        订单状态：<span>{{orderStatus}}</span>
                    </el-col>
                    <el-col :span="6">
                        退货原因：<span>{{orderDetails.tk_content}}</span>
                    </el-col>
                </el-row>
                <el-row class="row-style">
                    <el-col :span="6">
                        发货时间：<span><!-- {{$util.timeStampToTime(orderDetails.orderoktime)}} --></span>
                    </el-col>
                    <el-col :span="6">
                        快递单号：<span>{{orderDetails.express_num}}</span>
                    </el-col>
                    <el-col :span="6">
                        到货时间：<span></span>
                    </el-col>
                    <el-col :span="6">
                        运费：<span>{{orderDetails.freight}}</span>
                    </el-col>
                </el-row>
                <el-row class="row-style no-border">
                    <el-col :span="24">
                        备注：<span>{{orderDetails.beizhu}}</span>
                    </el-col>
                </el-row>
            </el-row>
            <el-row>
                <el-col :span="24" class="title">收货人信息</el-col>
            </el-row>
            <el-row class="content">
                <el-row class="row-style">
                    <el-col :span="24">
                        收货姓名：<span>{{orderDetails.name}}</span>
                    </el-col>
                </el-row>
                <el-row class="row-style">
                    <el-col :span="24">
                        联系方式：<span>{{orderDetails.phone}}</span>
                    </el-col>
                </el-row>
                <el-row class="row-style no-border">
                    <el-col :span="24">
                        收货地址：<span>{{orderDetails.sheng + orderDetails.shi + orderDetails.qu + orderDetails.address}}</span>
                    </el-col>
                </el-row>
            </el-row>
            <el-row>
                <el-col :span="24" class="title">商品信息</el-col>
            </el-row>
            <el-row class="content" style="margin-bottom: 40px">
                <el-row>
                    <el-col :span="24">
                        <el-table
                                :data="productList"
                                border
                                style="width: 100%;margin: 20px 0">
                            <el-table-column
                                    prop="head_img"
                                    label="商品图片"
                                    width="80">
                                <template scope="scope">
                                    <img :src="scope.row.head_img" alt="" class="img-style">
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="product_name"
                                    label="名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    label="商品ID">
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="商品单价">
                            </el-table-column>
                            <el-table-column
                                    prop="unit"
                                    label="单位">
                            </el-table-column>
                            <el-table-column
                                    prop="num"
                                    label="购买数量">
                            </el-table-column>
                            <el-table-column
                                    prop="son_price"
                                    label="商品总价">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="操作">
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7" :offset="17">
                        优惠合计：-0.00元；合计支付：<span>{{orderDetails.all_price}}</span>元
                    </el-col>
                </el-row>
            </el-row>

        </div>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    export default {
        name: "orderDetails",
        components:{breadcrumb},
        data(){
            return {
                routerList:[
                    {
                        path:'',
                        name:'订单管理'
                    },
                    {
                        path:'/fx_self_order',
                        name:'会员个人订单列表'
                    },
                    {
                        path:'/supplier_order_detail',
                        name:'订单详情'
                    },
                ],
                orderDetails:{},
                productList:[]
            }
        },
        computed:{
            orderStatus(){
                let status = this.orderDetails.status==0?'待支付':(this.orderDetails.status==1?'待发货':(this.orderDetails.status==2?'待收货':(this.orderDetails.status==3?'已完成':(this.orderDetails.status==4?'失效':(this.orderDetails.status==5?'退货':'')))))
                return status
            },
        },
        created(){
            this.getOrderDetails();
        },
        methods:{
            async getOrderDetails(){
                let res = await this.$Http.getFxUserOrderDetails({
                    order_id:this.$route.query.id
                })
                console.log(res);
                this.orderDetails = res;
                this.productList = res.content
            },
            attrToString(attr_list){
                let string = ''
                for(let i in attr_list){
                    string += `${attr_list[i].attr_group_name}:${attr_list[i].attr_name};`
                }
                return string
            }
        }
    }
</script>

<style scoped>
    .title{
        background-color: #fff;
        border-radius: 10px 10px 0 0;
        height:40px;
        line-height: 40px;
        box-sizing: border-box;
        padding-left:20px;
        margin-top: 30px;
        margin-bottom: 2px;
        font-weight: bold;
    }
    .content{
        box-sizing: border-box;
        background-color: #fff;
        padding:0 20px;
        border-radius: 0 0 10px 10px;
        color:#aaa;
        font-size: 14px;
    }
    .content span{
        color:#000;
    }
    .row-style{
        border-bottom:1px solid #eee;
        height:40px;
        line-height: 40px;
    }
    .no-border{
        border:none;
    }
    .img-style{
        width: 60px;
        height:60px;
    }
</style>
